<template>
    <div>
        <Row style="padding: 0px 10px 5px">
            <Col span="24">
            <h3>主播列表</h3>
            </Col>
            <hr style="margin: 30px -10px 0px;">
        </Row>
        <Row style="padding: 10px 5px">
            <Col span="24">
            <Button type="default" @click="addHost = true">增加主播</Button>
            <Button type="default" @click="exportCvs">导出</Button>

            <span style="float: right">
                    <Input v-model="params.query" placeholder="请输入主播名称或部门名称" style="width: 250px" @on-enter="search"></Input>
                    <Button type="primary" shape="circle" icon="ios-search" @click="search"></Button>
            </span>
            <Button style="float: right;margin-right: 5px" @click="resetAll">刷新
                <Icon type="refresh"></Icon>
            </Button>
            </Col>

        </Row>
        <div style="padding: 5px">
            <Table border :columns="listColumn" :loading="tableLoading" :data="listData" @on-sort-change="sort"></Table>
        </div>
        <Row style="padding: 20px">
            <Page style="float: right" :total="page.total" :page-size="params.limit"  :current="page.currentPage" @on-change="goPage"></Page>
        </Row>
        <!--增加主播对话框-->
        <Modal
                title="新增主播"
                v-model="addHost"
                :styles="{top: '20px'}" :width="680"
                @on-ok="submitAddHost('addHostModel')" :loading="loadingModel">
            <Form :model="addHostModel" ref="addHostModel" :rules="addHostModelValidate" :label-width="120">
                <FormItem prop="hostName" label="主播名称">
                    <Input v-model="addHostModel.hostName" placeholder="请输入主播名称"></Input>
                </FormItem>
                <FormItem prop="hostPhone" label="主播手机号码">
                    <Input v-model="addHostModel.hostPhone" placeholder="请输入主播手机号"></Input>
                </FormItem>
                <FormItem prop="department" label="主播部门名称">
                    <Input v-model="addHostModel.department" placeholder="请输入主播所在部门/机构"></Input>
                </FormItem>
                <FormItem prop="hostSex" label="主播性别">
                    <RadioGroup v-model="addHostModel.hostSex">
                        <Radio label="1">男</Radio>
                        <Radio label="2">女</Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem prop="hostQq" label="主播qq">
                    <Input v-model="addHostModel.hostQq" placeholder="请输入该主播qq"></Input>
                </FormItem>
                <FormItem prop="hostEmail" label="主播邮箱">
                    <Input v-model="addHostModel.hostEmail" placeholder="请输入该主播邮箱"></Input>
                </FormItem>

                <FormItem prop="remark" label="备注">
                    <Input v-model="addHostModel.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注信息"></Input>
                </FormItem>
            </Form>
        </Modal>
        <!--更新主播对话框-->
        <Modal
                title="主播详情"
                v-model="updateHost"
                :styles="{top: '20px'}" :width="680"
                @on-ok="submitUpdateHost('updateHostModel')" ok-text="更新" :loading="updateLoading">
            <Form :model="updateHostModel" ref="updateHostModel" :rules="updateHostModelValidate" :label-width="120">
                <FormItem prop="hostName" label="主播名称">
                    <Input v-model="updateHostModel.hostName" placeholder="请输入主播名称"></Input>
                </FormItem>
                <FormItem prop="hostPhone" label="主播手机号码">
                    <Input v-model="updateHostModel.hostPhone" placeholder="请输入主播手机号"></Input>
                </FormItem>
                <FormItem prop="department" label="主播部门名称">
                    <Input v-model="updateHostModel.department" placeholder="请输入主播所在部门/机构"></Input>
                </FormItem>
                <FormItem label="主播性别">
                    <RadioGroup v-model="updateHostModel.hostSex">
                        <Radio label="1">男</Radio>
                        <Radio label="2">女</Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem prop="hostQq" label="主播qq">
                    <Input v-model="updateHostModel.hostQq" placeholder="请输入该主播qq"></Input>
                </FormItem>
                <FormItem prop="hostEmail" label="主播邮箱">
                    <Input v-model="updateHostModel.hostEmail" placeholder="请输入该主播邮箱"></Input>
                </FormItem>

                <FormItem prop="remark" label="备注">
                    <Input v-model="updateHostModel.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注信息"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import { addHost, getHostList, updateHost, resetPassword, deleteHost, exportCvs} from '../../api/api'
    export default {
        data () {
            return {
                tableLoading:false,
                addHostModel:{
                    hostName:'',
                    hostSex:'2',
                    hostPhone:'',
                    department:'',
                    hostQq:'',
                    hostEmail:'',
                    remark:''
                },
                loadingModel:true,
                addHost:false,
                addHostModelValidate:{
                    hostName:{ required: true, message: '姓名不能为空', trigger: 'blur' },
                    hostSex:{required: true, message: '性别不能为空', trigger: 'change'},
                    hostPhone:{ required: true, message: '号码不能为空', trigger: 'blur' },
                    department:{ required: true, message: '部门信息不能为空', trigger: 'blur' },
                },
                updateLoading:true,
                updateHost:false,
                updateHostModel:{
                    hostId:null,
                    orgId:null,
                    customerId:null,
                    hostName:null,
                    hostSex:null,
                    hostPhone:null,
                    department:null,
                    hostQq:null,
                    hostEmail:null,
                    remark:null
                },
                updateHostModelValidate:{
                    hostName:{ required: true, message: '姓名不能为空', trigger: 'blur' },
                    //hostSex:{required: true, message: '性别不能为空', trigger: 'blur'},
                    hostPhone:{ required: true, message: '号码不能为空', trigger: 'blur' },
                    department:{ required: true, message: '部门信息不能为空', trigger: 'blur' },
                },
                params:{
                    page:1,
                    limit:10,
                    hostName:null,
                    order:'create_time',
                    sidx:'desc',
                    orgId:this.$store.state.orgId,
                    query:''
                },
                listColumn: [
                    {
                        title: '姓名',
                        key: 'hostName',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.hostName)
                            ]);
                        }
                    },
                    {
                        title: '部门',
                        key: 'department'
                    },
                    {
                        title: '手机号',
                        key: 'hostPhone'
                    },
                    {
                        title: '登录账号',
                        key: 'cusAccount'
                    },

                    {
                        title: '密码',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.resetPassword(params.index)
                                        }
                                    }
                                }, '密码重置'),
                            ]);
                        }
                    },

                    {
                        title: '创建时间',
                        key: 'createTime',
                        sortable: 'custom'
                    },
                    {
                        title: '直播间',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.goHostRoom(params.index)
                                        }
                                    }
                                }, '进入直播间')
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                listData: [

                ],
                page:{
                    total:null,
                    totalPage:null,
                    currentPage:1,

                },
            }
        },
        methods: {
            submitAddHost(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        addHost(this.addHostModel).then(response =>{
                            if (response.code == 0){
                                this.addHostModel = {
                                    hostName:'',
                                    hostSex:'1',
                                    hostPhone:'',
                                    department:'',
                                    hostQq:'',
                                    hostEmail:'',
                                    remark:''
                                }
                                this.addHost = false
                                this.$Message.success('操作成功！')
                                this.getListData()
                            }else {
                                this.addHost = false
                                this.$Message.error('操作失败！');
                            }
                        })
                    } else {
                        this.loadingModel = false;
                    }
                })
            },
            submitUpdateHost(name){
                this.$refs[name].validate((valid) => {
                        if (valid) {
                            updateHost(this.updateHostModel).then(res =>{
                                if (res.code == 0){
                                    this.updateHost = false
                                    this.$Message.success('操作成功！');
                                }else {
                                    this.updateHost = false
                                    this.$Message.error('操作失败！');
                                }
                            })
                        }
                })
            },
            show (index) {
                this.updateHostModel = this.listData[index]
                this.updateHost = true

            },
            goHostRoom(index){
                this.$router.push({ name: 'liveMan', params: { userid: this.listData[index].customerId }})
            },
            remove (index) {
                this.$Modal.confirm({
                    title: '删除主播',
                    content: '<p>主播删除后不可恢复，该主播直播资源仍保存</p>',
                    onOk: () => {
                        deleteHost(this.listData[index].hostId).then(res =>{
                            if (res.code == 0){
                                this.$Message.info('删除成功！');
                                this.getListData()
                            }
                        })
                    },
                    onCancel: () => {

                    }
                });

            },
            search(){
                this.getListData()
            },
            goPage(page){
                this.params.page = page
                this.getListData()
            },
            getListData(){
                this.tableLoading = true
                getHostList(this.params).then(res =>{
                    this.tableLoading = false
                    this.listData = res.page.list
                    this.page.totalPage = res.page.totalPage
                    this.page.total = res.page.totalCount
                    this.page.currentPage = res.page.currPage
                })
            },
            sort(sort){
                this.params.sidx = sort.order
                this.getListData()
            },
            resetPassword(index){
                this.$Modal.confirm({
                    title: '恢复初始密码',
                    content: '<p>确认后密码将恢复为初始密码，即用户手机号后6位。</p>',
                    onOk: () => {
                        let params ={
                            customer_id: this.listData[index].customerId
                        }
                        resetPassword(params).then(res =>{
                            if (res.code == 0){
                                this.$Message.info('密码重置成功');
                            }
                        })
                    },
                    onCancel: () => {

                    }
                });

            },
            resetAll(){
                this.params = {
                    page:1,
                    limit:10,
                    hostName:null,
                    order:'create_time',
                    sidx:'desc',
                    orgId:this.$store.state.orgId,
                    query:''
                }
                this.getListData()
            },
            exportCvs(){
                //实际项目中需要更改下载路径
                window.open("http://www.jackhoo.cn/cus_host/export_cvs/"+this.params.orgId);

            }

        },
        mounted(){
            this.getListData()
        }
    }
</script>
